<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>ByteCollege云课</title>
	<link rel="stylesheet" th:href="@{font/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{css/global.css}" href="/static/css/global.css">
	<script th:src="@{js/jquery-3.3.1.min.js}"></script>
	<script th:src="@{js/bootstrap.js}"></script>
	<style>
		body {
			background: #f9f9f9;
			font-size: 12px;
		}
		a:hover{
			color: #08bf91;
			text-decoration: none;
		}
		.banner-container form .tip {
			padding-top: 5px;
			color: hsla(0,0%,100%,.6);
		}
		.header{
			background-color: #191e29;
			border-width: 0;
		}
		.header .navbar-brand {
			padding: 0;
		}
		.header .navbar-brand img {
			height: 50px;
		}
		.header .navbar-nav>li>a {
			font-size: 16px;
		}
		.header .navbar-nav .dropdown .dropdown-menu {
			min-width: 130px;
			border-width: 0;
			text-align: center;
		}
		.header .navbar-nav .dropdown .dropdown-menu {
			background-color: #191e29;
		}
		.layout-body, .layout-side {
			padding: 0 5px;
		}
		.layout {
			min-height: 80%;
			margin-top: 70px;
			margin-bottom: 20px;
		}
		.content {
			margin-bottom: 10px;
			padding: 30px;
			background: #fff;
			border: 1px solid #eee;
		}
		.course-cates-content>a {
			display: inline-block;
			margin: 0 4px 4px 0;
			padding: 4px 10px;
			color: #666;
			border-radius: 15px;
			cursor: pointer;
			transition: color 1s ease;
			transition: background .5s ease;
		}
		.course-cates:first-child {
			margin-bottom: 10px;
		}
		.course-cates {
			font-size: 16px;
			color: #666;
		}
		.course-cates-title {
			padding: 4px 0 4px 15px;
		}
		.course-cates-content .course-cates-vip.active, .course-cates-content .course-cates-vip:focus, .course-cates-content .course-cates-vip:hover, .course-cates-content>a.active, .course-cates-content>a:focus, .course-cates-content>a:hover {
			color: #fff;
			background: #08bf91;
			text-decoration: none;
		}
		.course-cates-content .course-cates-vip, .course-cates-content>a {
			display: inline-block;
			margin: 0 4px 4px 0;
			padding: 4px 10px;
			color: #666;
			border-radius: 15px;
			cursor: pointer;
			transition: color 1s ease;
			transition: background .5s ease;
		}
		.course-cates-content .course-cates-vip a{
			color: #666;
		}
		.course-cates-vip a:hover{
			color: #fff;
			text-decoration: none;
		}
		.course-cates {
			font-size: 16px;
			color: #666;
		}
		.question-items {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.question-item {
			display: block;
			padding: 20px 0;
			border-bottom: 1px solid #eee;
			overflow: hidden;
		}
		.question-item-title {
			color: #4c5157;
			font-size: 18px;
			line-height: 24px;
			max-width: 100%;
			display: inline-block;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.question-item>.col-md-10 {
			padding: 0;
		}
		.question-item-author {
			width: 10%;
			margin-top: 16px;
		}
		.user-avatar {
			position: relative;
			display: inline-block;
		}
		.user-avatar img {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
		.question-item-summary {
			margin-top: 8px;
			color: #9b9da2;
			font-size: 13px;
		}
		.user-username {
			display: inline-block;
		}
		.username{
			position: relative;
			padding: 0 10px;
			line-height: 22px;
			font-size: 13px;
			flex-shrink: 0;
		}
		.fa {
			display: inline-block;
			font: normal normal normal 14px/1 FontAwesome;
			font-size: inherit;
			margin-right: 5px;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		.question-item-summary>span {
			margin: 0 4px;
		}
		.question-item-rank {
			padding: 0;
			margin-top: 8px;
			text-align: center;
		}
		.question-item-rank>div.question-item-answered {
			color: #0c9;
		}
		.question-item-rank>div {
			display: inline-block;
			color: #565a61;
			font-size: 14px;
			text-align: center;
		}
		.question-item-rank>div {
			display: inline-block;
			color: #565a61;
			font-size: 14px;
			text-align: center;
		}
		.side-btn {
			width: 100%;
			margin-bottom: 10px;
			padding: 14px 0;
			font-size: 20px;
			border-radius: 0;
			border: none;
		}
		.pagination-container {
			text-align: center;
			clear: both;
		}
		.layout-body, .layout-side {
			padding: 0 5px;
		}
		.panel-userinfo .body-userinfo .userinfo-header {
			word-break: break-all;
			overflow: visible;
		}
		.panel-userinfo .body-userinfo .userinfo-header .media-left {
			padding-left: 20px;
		}
		.user-avatar {
			position: relative;
			display: inline-block;
		}
		.panel-userinfo .body-userinfo .userinfo-footer {
			margin-bottom: -10px;
			color: #08bf91;
		}
		.sidebox {
			margin-bottom: 10px;
			padding: 15px;
			background: #fff;
			border: 1px solid #eee;
		}
		.sidebox-header {
			overflow: hidden;
		}
		.sidebox-header {
			padding: 0 0 10px;
			border-bottom: 1px solid #eee;
		}
		.sidebox-title {
			float: left;
			margin: 0;
			font-size: 16px;
			color: #4c5157;
		}
		.sidebox-body {
			padding: 10px 0;
			font-size: 14px;
		}
		.side-list-body a {
			display: block;
			padding: 10px;
			color: #565a61;
			font-size: 14px;
			word-break: break-all;
			word-wrap: break-word;
		}
		.side-image.side-qrcode {
			padding: 15px 0;
		}
		.side-image {
			margin-bottom: 10px;
			background: #fff;
			text-align: center;
		}
		.side-image.side-qrcode img {
			width: 183px;
			max-width: 100%;
		}
		.side-image .side-image-text {
			color: #4c5157;
			font-size: 16px;
		}
		.footer {
			padding-top: 20px;
			background: #191e29;
		}
		.footer-col .col-title {
			font-size: 14px;
			margin-bottom: 10px;
			color: hsla(0,0%,100%,.5);
		}
		.footer-col a {
			display: inline-block;
			margin-bottom: 3px;
			color: hsla(0,0%,100%,.5);
		}
	</style>
</head>
<body>
<div th:include="index::head-nav"></div>

<div class="container layout layout-margin-top">
	<div class="row">
		<div class="col-md-9 layout-body">
			<div class="content">
				<div class="row course-cates">
					<div class="col-md-1 course-cates-title">类别：</div>
					<div class="col-md-11 course-cates-content">
						<a th:class="${typeId} eq '-1' ? 'active':0" th:href="'?typeId=-1&filed='+${filed}">全部</a>
						<a th:each="item:${atypeList}"  th:href="'?typeId='+${item.atypeId}+'&filed='+${filed}" th:class="${typeId} eq ${item.atypeId} ? 'active' : 0" th:text="${item.atypeName}"></a>
					</div>
				</div>
			</div>
			<div class="content position-relative">
				<div role="tabpanel" class="tab-pane active">
					<ul class="row question-items" th:each="article:${articleList}">
						<li class="question-item">
							<div class="col-md-10">
								<div class="col-sm-2 question-item-author">
									<div class="user-avatar ">
										<img th:src="@{article.userHeadphoto}">
									</div>
								</div>
								<div class="col-sm-10">
									<h4>
										<a class="question-item-title" th:href="@{getArticleDetailById(articleId=${article.articleId})}" target="_blank">[[${article.articleTitle}]]</a>
									</h4>
									<div class="question-item-summary">
										<div class="user-username ">
											<i class="fa fa-clock-o"></i><time th:text="${#dates.format(article.articleTime,'yyyy-MM-dd')}"></time>
											<span class="username"><i class="fa fa-user"></i>[[${article.userNickname}]]</span>
											<span class="username"><i class="fa fa-tag"></i>[[${article.atypeName}]]</span>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-2 question-item-rank">
								<div class="question-item-answered">
									<div>[[${article.aremarkAmount}]]</div>
									<div>回复</div>
								</div>
								<div class="question-item-views">
									<div>[[${article.articleClicks}]]</div>
									<div>查看</div>
								</div>
							</div>
						</li>
					</ul>
					<nav class="pagination-container">
						<ul class="pagination">
							<!--点击首页会跳转到第一页，并且首页禁用-->
							<th:block th:if="${page.current==1}">
								<li id="first" class="active,disabled">
									<a>首页</a>
								</li>
							</th:block>

							<th:block th:if="${page.current>1}">
								<li><a th:href="'?pageIndex='+${1}+'&typeId='+${typeId}">首页</a></li>
							</th:block>

							<li  th:if="${page.hasPrevious()}">
								<a  th:href="'?pageIndex='+(${page.current}-1)+'&typeId='+${typeId}">
									<span aria-hidden="true">上一页</span>
								</a>
							</li>
							<li class="disabled">
								<a>第[[${page.current}]]页/共[[${page.pages}]]页</a>
							</li>
							<!--下一页-->
							<li  th:if="${page.hasNext()}">
								<a  th:href="'?pageIndex='+(${page.current}+1)+'&typeId='+${typeId}">
									<span aria-hidden="true">下一页</span>
								</a>
							</li>


							<!--点击末页会跳转到最后一页，并且最后一页禁用-->
							<th:block th:if="${page.current<page.pages}">
								<li > <a th:href="'?pageIndex='+${page.pages}+'&typeId='+${typeId}">末页</a></li>
							</th:block>
							<th:block th:if="${page.current==page.pages}">
								<li class="active,disabled" id="last"> <a>末页</a></li>
							</th:block>
						</ul>
					</nav>
				</div>
			</div>
		</div>
		<div class="col-md-3 layout-side">
			<a class="submit-question btn side-btn btn-primary" th:href="@{publish}">我要发帖</a>
			<div class="sidebox">
				<div class="sidebox-header">
					<h4 class="sidebox-title">回复排行</h4>
				</div>
				<div class="sidebox-body course-content side-list-body">
					<div style="display: inline-block;line-height: 20px;">
						<a th:each="hotArticle:${hotArticleList}" th:href="@{getArticleDetailById(articleId=${hotArticle.articleId})}">
							<small style="color:#0c9;margin-right: 10px;">[[${hotArticle.orderId}]]</small>
							[[${hotArticle.articleTitle}]]
							<small class="fa fa-commenting-o" aria-hidden="true"></small>·<small>[[${hotArticle.aremarkAmount}]]</small>
						</a>
					</div>
				</div>
			</div>
			<div class="sidebox">
				<div class="sidebox-header">
					<h4 class="sidebox-title">阅读排行</h4>
				</div>
				<div class="sidebox-body course-content side-list-body">
					<div style="display: inline-block;line-height: 20px;">
						<a th:each="readArticle:${readArticleList}" th:href="@{getArticleDetailById(articleId=${readArticle.articleId})}">
							<small style="color:#0c9;margin-right: 10px;">[[${readArticle.orderId}]]</small>
							[[${readArticle.articleTitle}]]
						</a>
					</div>
				</div>
			</div>
			<div class="side-image side-qrcode">
				<a th:href="@{/course/search}"><img src="../img/1471514111981.png" style="height: 93px;"></a>
				<div class="user-level">更多精彩课程</div>
			</div>
		</div>
	</div>
</div>
<!--页尾-->
<div th:include="index::footer"></div>
</body>
</html>
<script>
	$(function () {
		// 分页
		const pageNum = [[${page.getCurrent()}]];
		const pages = [[${page.getPages()}]];
		const hasNextPage = [[${page.hasNext()}]];
		const hasPreviousPage = [[${page.hasPrevious()}]];


		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});

		// 判断按钮状态
		// 没有上一页
		if(!hasPreviousPage) {
			$("#prev").addClass("disabled");
			$("#first").addClass("disabled");
		}
		// 没有下一页
		if(!hasNextPage) {
			$("#next").addClass("disabled");
			$("#last").addClass("disabled");
		}

		// 添加事件
		// 点击首页
		$("#first").click(function () {
			if(!$("#first").hasClass("disabled")) {
				$("#pageNum").val(1);
				$("#qf").submit();
			}
		});
		// 点击上一页
		$("#prev").click(function () {
			if(!$("#prev").hasClass("disabled")) {
				$("#pageNum").val(pageNum - 1);
				$("#qf").submit();
			}
		});
		// 下一页
		$("#next").click(function () {
			if(!$("#next").hasClass("disabled")) {
				$("#pageNum").val(pageNum + 1);
				$("#qf").submit();
			}
		});
		// 最后一页
		$("#last").click(function () {
			if(!$("#last").hasClass("disabled")) {
				$("#pageNum").val(pages);
				$("#qf").submit();
			}
		});
	});
</script>